<!-- 用于菜单显示和all sessions显示 -->
<template>
    <div class="my-session-item">
        <el-image :src="session.modelAvatar" class="my-image"></el-image>
        <div class="content-container">
            <!-- 第一行：机器人名称与时间 -->
            <div class="rbtname-time">
                <div class="my-rbt-name">
                    {{ session.modelName }}
                </div>
                <div class="my-time">{{ session.createtime }}</div>
            </div>
            <div class="session-content">
                <!-- 第二行：会话名称与箭头 -->
                <div class="session-row">
                    <div class="session-icon">
                        <div class="my-session">{{ session.title }}</div>
                        <div class="arrow-icon"><el-icon>
                                <ArrowRight />
                            </el-icon></div>
                    </div>
                    <!-- 删除会话按钮，hover显示 -->
                    <div class="button-hover" @mouseenter="inHover">
                        <el-popover placement="right" visible="true" @hide="outHover" :width="250">
                            <template #reference>
                                <el-button circle v-show="isShow"><el-icon class="icon-more">
                                        <More />
                                    </el-icon></el-button>
                            </template>
                            <div class="popover-body">
                                <div>
                                    <p>是否删除此会话，此操作不可撤销</p>
                                </div>
                                <!-- 在此增加删除逻辑函数，@click触发 -->
                                <el-button type="danger" round text bg :icon="Delete"
                                    @click="handleDeleteSession">删除会话</el-button>
                            </div>
                        </el-popover>
                    </div>
                </div>
                <!-- 第三行：会话内容 -->
                <div class="content-row">
                    {{ session.content }} </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { ArrowRight, Delete, More } from "@element-plus/icons-vue"
import { deleteSession } from "@/api/session";
import { useSessionsStore } from "@/stores/sessions";
import { useRouter } from "vue-router";
// import More from "../icons/More.vue";
const router = useRouter()
const props = defineProps(['session'])
// const emits = defineEmits(['getDeleteSession'])
const sessionsStore = useSessionsStore()

const session = ref(
    {
        // title: '会话名称',
        // content: '你好，我是ai小助手',
        // modelName: 'deepseek',
        // createtime: '2025.03.02',
        // modelAvatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
)

onMounted(() => {
    // console.log(prop.session);
    // console.log(props.session);
    session.value = props.session
})

const isShow = ref(false)
const inHover = () => {
    isShow.value = true
}
const outHover = () => {
    isShow.value = false
}
//删除会话逻辑
const handleDeleteSession = () => {
    // 在这里添加删除会话的逻辑
    // console.log('删除会话');
    deleteSession({ id: session.value.id })
        .then((res) => {
            // emits('getDeleteSession', session.value.id)
            sessionsStore.deleteSession(session.value.id)
            location.reload()
            // router.push({ path: '/' })
        })

}

</script>

<style lang="scss" scoped>
.my-session-item {
    display: flex;
    align-items: center;
    row-gap: 0.5rem;
    gap: 0.5rem;
    width: 100%;

    .my-image {
        width: 2rem;
        height: 2rem;
        // vertical-align: top;
    }

    .content-container {
        display: flex;
        flex-direction: column;
        row-gap: 0.2rem;
        width: 80%;
        overflow: hidden;
        flex: 1 1 auto;

        .rbtname-time {
            display: flex;
            align-items: center;
            line-height: 0.7rem;
            font-size: 0.7rem;
            color: #666;

            .my-rbt-name {
                flex-grow: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .session-content {
            display: flex;
            flex-direction: column;
            row-gap: 0.5rem;


            .session-row {
                display: flex;
                align-items: center;
                line-height: 1rem;
                font-size: 1rem;

                .session-icon {
                    display: flex;
                    align-items: center;
                    width: 50%;
                    flex-grow: 1;
                    color: black;

                    .my-session {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .button-hover {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 2rem;
                    width: 20%;

                    :hover {
                        background-color: rgb(197.7, 225.9, 255);
                    }

                    .icon-more {
                        margin: 0;
                    }

                }
            }

            .content-row {
                line-height: 0.7rem;
                font-size: 0.7rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #999;
            }

        }
    }
}

.popover-body {
    // text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.5rem;
}
</style>